<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用WebGL绘制一个点</title>
    <!-- 顶点着色器源码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
          //给内置变量gl_PointSize赋值像素大小
          gl_PointSize=40.0;
          //顶点位置，位于坐标原点
          gl_Position =vec4(0.0,0.00,0.50,1.0);
        }
      </script>
    <!-- 片元着色器源码 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
        void main() {
          gl_FragColor = vec4(0.0,0.0,1.0,1.0);
        }
    </script>
</head>

<body>
    <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
    <canvas id="webgl" width="500" height="400" style="background-color: beige"></canvas>



    <script>
        //通过getElementById()方法获取canvas画布
        var canvas = document.getElementById('webgl');
        // var canvas = document.createElement('canvas');
        // canvas.width = 500;
        // canvas.height = 500;

        if (1) {

            //通过方法getContext()获取WebGL上下文
            var gl = canvas.getContext('webgl');

            //顶点着色器源码
            var vertexShaderSource = document.getElementById('vertexShader').innerText;
            //片元着色器源码
            var fragShaderSource = document.getElementById('fragmentShader').innerText;

            //初始化着色器
            var program = initShader(gl, vertexShaderSource, fragShaderSource);
            //开始绘制，显示器显示结果
            gl.drawArrays(gl.POINTS, 0, 1);

            //声明初始化着色器函数
            function initShader(gl, vertexShaderSource, fragmentShaderSource) {
                //创建顶点着色器对象
                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                //创建片元着色器对象
                var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                //引入顶点、片元着色器源代码
                gl.shaderSource(vertexShader, vertexShaderSource);
                gl.shaderSource(fragmentShader, fragmentShaderSource);
                //编译顶点、片元着色器
                gl.compileShader(vertexShader);
                gl.compileShader(fragmentShader);

                //创建程序对象program
                var program = gl.createProgram();
                //附着顶点着色器和片元着色器到program
                gl.attachShader(program, vertexShader);
                gl.attachShader(program, fragmentShader);
                //链接program
                gl.linkProgram(program);
                //使用program
                gl.useProgram(program);
                //返回程序program对象
                return program;
            }
        } else {
            var c = canvas.getContext('2d');
            c.moveTo(0, 0);//直线起点坐标
            c.lineTo(50, 50);//直线第2个点坐标
            c.lineTo(0, 100);//直线第3个点坐标
            c.stroke();//把点连成直线绘制出来
        }
    </script>
</body>

</html>